<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>加州路段十二检测点的早高峰时段AADT</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!-- 统计报表的核心js文件 -->
	<script type="text/javascript" src="js/chart/fusioncharts.js"></script>
	<!-- 统计报表的主题 -->
	<script type="text/javascript" src="js/chart/fusioncharts.theme.fint.js"></script>
	<!-- jquery核心包 -->
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<!-- 报表统计插件 -->
	<script type="text/javascript" src="js/chart/lschart_1.0.js"></script>
  </head>
  
  <body>
  
  <!-- 数据报表的目标 -->
  <div id ="contentBox"></div>
  <script type="text/javascript">
  	$(function(){
  		//怎么对接数据？
  		tm_loading();
  	});
  	//1如何下载统计报表2数据解析
  	function tm_loading(){
  		//ajax就是一个普通的http请求，无状态通过JavaScript实践去触发的一种请求方式
  		//HttpServletRequest HttpServletResponse(输出数据)
  		$.ajax({
  			type:"post",//请求类型
  			url:"AADT.jsp",//请求地址
  			success:function(data){//服务器返回给客户端的数据
  				var jdata = eval("("+data+")");
  				var html = "";
  				for(var i=0; i<jdata.length;i++){
  					//和数据报表对接
  					html += "<set label='"+jdata[i].point+"' value='"+jdata[i].AADT+"'/>";
  				}
  				//调用自定义数据统计表函数
				$.lschart({
							target:"contentBox",
							width:960,
							height:450,
							data:"<chart caption='加州道路十二检测点AADT' yAxisName='AADT' XAxisName='point' showPlotBorder='0' divLineColor='CCCCCC' canvasBorderAlpha='0'>"
								 +html+"</chart>"				        
						});
  			}
  		});
  	};
  </script>
  </body>
</html>
